<template>
	<div>
		<div id="indexheader" class="index-header">
			{{headTitle | reverseFilter}}
		</div>
		<!-- top-->
		<div id="indextop" class="index-top">
			<img src="image/indextopbg.jpg" alt="....">
		</div>
		<!-- content-->
		<div id="indexcontent" class="index-content" style="position: relative;">
			<!-- -->
			<div class="login-box">
				<div class="login-box-plain">
					<div>
						<form name="loginform">
							<div class="input-group" style="margin-top: 20px">
								<input type="radio" v-model="usertype" value="1" id="usertype1">&nbsp;
								<label for="userrole1" style="font-weight: normal;">普通用户</label>&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="radio" v-model="usertype" value="2" id="usertype2">&nbsp;
								<label for="userrole1" style="font-weight: normal;">超级用户</label>&nbsp;&nbsp;
							</div>
							<div class="input-group" style="margin-top: 10px">
							  <span class="input-group-addon">邮&nbsp;箱</span>
							  <input type="text" class="form-control" placeholder="Email" :value="email" @input="updateEmail" >
							</div>
							<div class="input-group" style="margin-top: 10px">
							  <span class="input-group-addon">密&nbsp;码</span>
							  <input type="password" class="form-control" placeholder="Password" v-model="password">
							</div>
							<!-- <div class="input-group" style="margin-top: 10px">
							  <span class="input-group-addon">验证码</span>
							  <input type="password" class="form-control" placeholder="checkCode" v-model="checkCode">
							</div> -->
							<div class="input-group" style="margin-top: 30px">
								<a class="btn btn-info" @click="login()" id="login" style="width: 200px;margin-left: 53px;">登录</a>
							</div>
							<div class="input-group" style="margin-top: 30px">
								<a v-on:click="getPassword()" style="font-size: 16px;cursor: default;">忘记密码？</a>
								<a v-on:click="registerNow()" style="font-size: 16px;cursor: default;">立即注册？</a>
							</div>
						</form>
					</div>
				</div>
			</div>
	
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		  <!-- Indicators -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
			  </ol>
	
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="image/index_bg1.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="image/index_bg2.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="image/index_bg3.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="image/indexcontentbg.png" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			  </div>
	
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
		<!-- footer-->
		<div id="indexfooter" class="index-footer"> 
			胡红翔
		</div>
	</div>
</template>
<script>
	Login.login = function() {
		return {
			data: function() {
				return {
					headTitle: "不想说话，就是喜欢！"
				}
			},
			beforeRouteEnter: function(to, from, next) {
				console.log("login beforeRouteEnter. to: " + to);
				next(function(vm) {
					console.log(vm.$route);
				})
			},
			created: function() {
				console.log("login created.");
			},
			computed: {
				usertype: {
				    get: function() {
				      return store.getters.usertype;
				    },
				    set: function(value) {
				      store.commit('updateUsertype', value)
				    }
				 },
				 email: {
				    get: function() {
				      return store.getters.email;
				    },
				    set: function(value) {
				      store.commit('updateEmail', value)
				    }
				 },
				 password: {
				    get: function() {
				      return store.getters.password;
				    },
				    set: function(value) {
				      store.commit('updatePassword', value)
				    }
				 },
			}, 
			methods: {
				login: function() {

                    router.push("main");
					// 校验数据
//					checkNull.isNotEmpty(this.usertype, "用户类型不能为空！");
//					checkNull.isNotEmpty(this.email, "用户的邮箱不能为空！");
//					checkNull.isNotEmpty(this.password, "用户的密码不能为空！");
//					checkPattern.checkEmail(this.email, "用户的邮箱格式不对！");
//					checkLength.minLength(this.password, 6, "用户的密码不能短于6位！");
//					var data = {
//						"Email": this.email,
//						"Password": this.password,
//						"UserType": this.usertype
//					};
//
//					// 发送请求
//					var vm = this;
//                    App.blockUI(this, 100);
//					vm.$http.post('loginAction/userLogin.action', data).then((response) => {
//						if (response.body.returnCode == "000000") {
//							var data = response.body.data;
//							// 将用户的邮箱保存在缓存中
//							store.commit("updateEmail", data.email);
//							store.commit("updateUserId", data.userId);
//							router.push("main");
//                        	App.unblockUI(this);
//						} else {
//							toastr.info(response.body.errorMsg);
//						}
//					}, (response) => {
//						toastr.info(response.body.returnMsg);
//					})
				},
				getPassword: function() {
					router.push("/password/passwordPre");
				},
				registerNow: function() {
					router.push("/register/registerPre");
				},
				updateEmail: function(e) {
					store.commit("updateEmail", e.target.value);
				}
			}
		}
	}
</script>
<style>
	.login-btn {
		background-color: #FF0000;
	}
</style>